<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通知中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="home-b2c.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">通知中心</h1>
                <button onclick="markAllRead()" class="text-white text-sm opacity-80">
                    全部已读
                </button>
            </div>
        </div>

        <!-- Notification Stats -->
        <div class="px-4 py-3 bg-gradient-to-r from-indigo-600 to-purple-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3">
                <div class="grid grid-cols-3 gap-3 text-white text-center">
                    <div>
                        <p class="text-lg font-bold">8</p>
                        <p class="text-xs opacity-80">未读消息</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">25</p>
                        <p class="text-xs opacity-80">订单通知</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">12</p>
                        <p class="text-xs opacity-80">系统通知</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab Navigation -->
        <div class="px-4 py-2 bg-white border-b border-gray-200">
            <div class="flex space-x-4">
                <button onclick="switchNotificationTab('all')" id="tab-all" class="pb-2 border-b-2 border-indigo-500 text-indigo-500 font-medium text-sm">
                    全部通知(45)
                </button>
                <button onclick="switchNotificationTab('orders')" id="tab-orders" class="pb-2 text-gray-500 text-sm">
                    订单通知(25)
                </button>
                <button onclick="switchNotificationTab('system')" id="tab-system" class="pb-2 text-gray-500 text-sm">
                    系统通知(12)
                </button>
                <button onclick="switchNotificationTab('promotions')" id="tab-promotions" class="pb-2 text-gray-500 text-sm">
                    活动通知(8)
                </button>
            </div>
        </div>

        <!-- Notification List -->
        <div class="h-[calc(852px-280px)] overflow-y-auto pb-24">
            <!-- All Notifications Tab -->
            <div id="notifications-all" class="notification-tab">
                <div class="p-4">
                    <!-- Unread Notification 1 -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-3 relative">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-shopping-cart text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">新订单通知</h4>
                                    <div class="flex items-center">
                                        <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
                                        <span class="text-xs text-gray-400">5分钟前</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">您收到一笔新订单，订单金额¥1,298，请及时处理发货。</p>
                                <p class="text-xs text-gray-500">订单号: 202501050156</p>
                                <div class="mt-3 flex space-x-2">
                                    <button onclick="viewOrder('202501050156')" class="bg-indigo-500 text-white text-xs px-3 py-1.5 rounded-lg">查看订单</button>
                                    <button onclick="markAsRead(this)" class="bg-gray-100 text-gray-600 text-xs px-3 py-1.5 rounded-lg">标记已读</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Unread Notification 2 -->
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-3 relative">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">库存预警</h4>
                                    <div class="flex items-center">
                                        <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
                                        <span class="text-xs text-gray-400">15分钟前</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">商品"无线蓝牙耳机 Pro Max"库存不足，剩余库存仅5件，建议及时补货。</p>
                                <div class="mt-3 flex space-x-2">
                                    <button onclick="manageInventory()" class="bg-orange-500 text-white text-xs px-3 py-1.5 rounded-lg">管理库存</button>
                                    <button onclick="markAsRead(this)" class="bg-gray-100 text-gray-600 text-xs px-3 py-1.5 rounded-lg">标记已读</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Read Notification 1 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-truck text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">物流更新</h4>
                                    <span class="text-xs text-gray-400">1小时前</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">订单202501050128已发货，快递单号：SF1234567890。</p>
                                <button onclick="trackPackage('SF1234567890')" class="bg-blue-100 text-blue-600 text-xs px-3 py-1.5 rounded-lg">查看物流</button>
                            </div>
                        </div>
                    </div>

                    <!-- Read Notification 2 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-star text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">好评提醒</h4>
                                    <span class="text-xs text-gray-400">2小时前</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">您的店铺收到一条5星好评，买家对商品质量很满意！</p>
                                <button onclick="viewReviews()" class="bg-purple-100 text-purple-600 text-xs px-3 py-1.5 rounded-lg">查看评价</button>
                            </div>
                        </div>
                    </div>

                    <!-- System Notification -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-gray-400 to-gray-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-cog text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">系统升级通知</h4>
                                    <span class="text-xs text-gray-400">昨天 18:30</span>
                                </div>
                                <p class="text-sm text-gray-600">系统将于今晚23:00-01:00进行维护升级，期间可能影响部分功能使用。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Notifications Tab -->
            <div id="notifications-orders" class="notification-tab hidden">
                <div class="p-4">
                    <!-- Order Notification 1 -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-3 relative">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-shopping-cart text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">新订单通知</h4>
                                    <div class="flex items-center">
                                        <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
                                        <span class="text-xs text-gray-400">5分钟前</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">您收到一笔新订单，订单金额¥1,298，请及时处理发货。</p>
                                <p class="text-xs text-gray-500 mb-3">订单号: 202501050156 | 买家: 张先生</p>
                                <div class="flex space-x-2">
                                    <button onclick="viewOrder('202501050156')" class="bg-blue-500 text-white text-xs px-3 py-1.5 rounded-lg">查看订单</button>
                                    <button onclick="markAsRead(this)" class="bg-gray-100 text-gray-600 text-xs px-3 py-1.5 rounded-lg">标记已读</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Order Notification 2 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-truck text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">订单发货提醒</h4>
                                    <span class="text-xs text-gray-400">1小时前</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">订单202501050128需要发货，买家催发货消息。</p>
                                <p class="text-xs text-gray-500 mb-3">订单号: 202501050128 | 买家: 李女士</p>
                                <button onclick="viewOrder('202501050128')" class="bg-orange-500 text-white text-xs px-3 py-1.5 rounded-lg">立即发货</button>
                            </div>
                        </div>
                    </div>

                    <!-- Order Notification 3 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-red-400 to-red-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">订单超时提醒</h4>
                                    <span class="text-xs text-gray-400">2小时前</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">订单202501050099待付款超时，系统已自动取消。</p>
                                <p class="text-xs text-gray-500">订单号: 202501050099 | 金额: ¥567</p>
                            </div>
                        </div>
                    </div>

                    <!-- Order Notification 4 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-check-circle text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">订单完成通知</h4>
                                    <span class="text-xs text-gray-400">3小时前</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">订单202501050087已确认收货，交易完成。</p>
                                <p class="text-xs text-gray-500">订单号: 202501050087 | 金额: ¥299</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- System Notifications Tab -->
            <div id="notifications-system" class="notification-tab hidden">
                <div class="p-4">
                    <!-- System Notification 1 -->
                    <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-3 relative">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-red-400 to-red-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">系统维护通知</h4>
                                    <div class="flex items-center">
                                        <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
                                        <span class="text-xs text-gray-400">30分钟前</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">系统将于今晚23:00-01:00进行维护升级，期间可能影响部分功能使用。</p>
                                <p class="text-xs text-gray-500 mb-3">请提前安排好相关业务，避免影响正常经营。</p>
                                <div class="flex space-x-2">
                                    <button onclick="markAsRead(this)" class="bg-red-100 text-red-600 text-xs px-3 py-1.5 rounded-lg">知道了</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- System Notification 2 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-sync-alt text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">功能更新通知</h4>
                                    <span class="text-xs text-gray-400">昨天 16:30</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">新增商品批量编辑功能，支持批量修改价格、库存等信息。</p>
                                <p class="text-xs text-gray-500">立即体验新功能，提升管理效率。</p>
                            </div>
                        </div>
                    </div>

                    <!-- System Notification 3 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-shield-alt text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">安全提醒</h4>
                                    <span class="text-xs text-gray-400">昨天 14:20</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">检测到您的账户在异地登录，如非本人操作请及时修改密码。</p>
                                <p class="text-xs text-gray-500">登录地点: 上海市 | 登录时间: 2025-01-04 14:15</p>
                            </div>
                        </div>
                    </div>

                    <!-- System Notification 4 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-bell text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">政策通知</h4>
                                    <span class="text-xs text-gray-400">2天前</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">平台服务协议更新，新增商家权益保护条款。</p>
                                <p class="text-xs text-gray-500">详情请查看最新版本的服务协议。</p>
                            </div>
                        </div>
                    </div>

                    <!-- System Notification 5 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-star text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">等级提升通知</h4>
                                    <span class="text-xs text-gray-400">3天前</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">恭喜您的店铺等级提升为金牌商家，享受更多平台权益。</p>
                                <p class="text-xs text-gray-500">查看详细权益说明和专属服务。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Promotions Notifications Tab -->
            <div id="notifications-promotions" class="notification-tab hidden">
                <div class="p-4">
                    <!-- Promotion Notification 1 -->
                    <div class="bg-gradient-to-r from-pink-50 to-red-50 border border-pink-200 rounded-lg p-4 mb-3 relative">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-pink-400 to-red-400 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-fire text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">双11大促报名</h4>
                                    <div class="flex items-center">
                                        <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
                                        <span class="text-xs text-gray-400">10分钟前</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">双11购物节活动开始报名，预计流量提升300%，机会难得！</p>
                                <p class="text-xs text-gray-500 mb-3">报名截止: 2025-01-15 | 活动时间: 1月20-25日</p>
                                <div class="flex space-x-2">
                                    <button onclick="joinPromotion('double11')" class="bg-red-500 text-white text-xs px-3 py-1.5 rounded-lg">立即报名</button>
                                    <button onclick="markAsRead(this)" class="bg-gray-100 text-gray-600 text-xs px-3 py-1.5 rounded-lg">稍后处理</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Promotion Notification 2 -->
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-3 relative">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-400 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-gift text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">新品推广活动</h4>
                                    <div class="flex items-center">
                                        <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
                                        <span class="text-xs text-gray-400">1小时前</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">参与新品推广，获得首页展示位，提升商品曝光度。</p>
                                <p class="text-xs text-gray-500 mb-3">推广费用: ¥200/天 | 预估曝光: 10万+</p>
                                <div class="flex space-x-2">
                                    <button onclick="joinPromotion('newproduct')" class="bg-yellow-500 text-white text-xs px-3 py-1.5 rounded-lg">参与推广</button>
                                    <button onclick="markAsRead(this)" class="bg-gray-100 text-gray-600 text-xs px-3 py-1.5 rounded-lg">了解详情</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Promotion Notification 3 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-indigo-400 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-tags text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">限时优惠券活动</h4>
                                    <span class="text-xs text-gray-400">2小时前</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">发放限时优惠券，提升用户下单转化率。</p>
                                <p class="text-xs text-gray-500">优惠券面额: 5-50元 | 有效期: 7天</p>
                            </div>
                        </div>
                    </div>

                    <!-- Promotion Notification 4 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-green-400 to-teal-400 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-medal text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">品质商家认证</h4>
                                    <span class="text-xs text-gray-400">昨天 15:30</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">申请品质商家认证，获得官方品质标识，提升用户信任度。</p>
                                <p class="text-xs text-gray-500">认证费用: 免费 | 审核周期: 3-5个工作日</p>
                            </div>
                        </div>
                    </div>

                    <!-- Promotion Notification 5 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-pink-400 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-crown text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">会员专享活动</h4>
                                    <span class="text-xs text-gray-400">昨天 10:00</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">会员日活动来袭，为会员用户提供专属优惠。</p>
                                <p class="text-xs text-gray-500">活动时间: 每月8日 | 专属折扣: 8.8折</p>
                            </div>
                        </div>
                    </div>

                    <!-- Promotion Notification 6 -->
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 opacity-75">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-400 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-bullhorn text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h4 class="text-sm font-medium text-gray-800">直播带货招募</h4>
                                    <span class="text-xs text-gray-400">2天前</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">招募优质商家参与直播带货，流量扶持+佣金分成。</p>
                                <p class="text-xs text-gray-500">直播时段: 晚上8-10点 | 佣金比例: 10%</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <script>
        // Switch notification tabs
        function switchNotificationTab(tabName) {
            // Hide all tab contents
            document.querySelectorAll('.notification-tab').forEach(tab => {
                tab.classList.add('hidden');
            });
            
            // Remove active styles from all tab buttons
            document.querySelectorAll('[id^="tab-"]').forEach(btn => {
                btn.classList.remove('border-b-2', 'border-indigo-500', 'text-indigo-500', 'font-medium');
                btn.classList.add('text-gray-500');
            });
            
            // Show selected tab content
            document.getElementById('notifications-' + tabName).classList.remove('hidden');
            
            // Add active styles to selected tab button
            const activeBtn = document.getElementById('tab-' + tabName);
            activeBtn.classList.remove('text-gray-500');
            activeBtn.classList.add('border-b-2', 'border-indigo-500', 'text-indigo-500', 'font-medium');
        }

        // Mark single notification as read
        function markAsRead(button) {
            const notification = button.closest('.bg-blue-50, .bg-yellow-50');
            if (notification) {
                notification.classList.remove('bg-blue-50', 'bg-yellow-50', 'border-blue-200', 'border-yellow-200');
                notification.classList.add('bg-white', 'border-gray-200', 'opacity-75');
                
                // Remove unread indicator
                const unreadDot = notification.querySelector('.bg-red-500');
                if (unreadDot) {
                    unreadDot.remove();
                }
                
                // Remove mark as read button
                button.remove();
            }
            
            // Show success message
            showToast('通知已标记为已读');
        }

        // Mark all notifications as read
        function markAllRead() {
            if (confirm('确定要将所有通知标记为已读吗？')) {
                const unreadNotifications = document.querySelectorAll('.bg-blue-50, .bg-yellow-50');
                unreadNotifications.forEach(notification => {
                    notification.classList.remove('bg-blue-50', 'bg-yellow-50', 'border-blue-200', 'border-yellow-200');
                    notification.classList.add('bg-white', 'border-gray-200', 'opacity-75');
                    
                    // Remove unread indicators
                    const unreadDot = notification.querySelector('.bg-red-500');
                    if (unreadDot) {
                        unreadDot.remove();
                    }
                    
                    // Remove mark as read buttons
                    const markReadBtn = notification.querySelector('button:contains("标记已读")');
                    if (markReadBtn) {
                        markReadBtn.remove();
                    }
                });
                
                showToast('所有通知已标记为已读');
            }
        }

        // View order details
        function viewOrder(orderId) {
            window.location.href = 'order-detail.html?id=' + orderId;
        }

        // Manage inventory
        function manageInventory() {
            window.location.href = 'inventory-management.html';
        }

        // Track package
        function trackPackage(trackingNumber) {
            window.location.href = 'package-tracking.html?tracking=' + trackingNumber;
        }

        // View reviews
        function viewReviews() {
            window.location.href = 'shop-reviews.html';
        }

        // Show toast message
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Join promotion activity
        function joinPromotion(activityType) {
            const activities = {
                'double11': '双11购物节',
                'newproduct': '新品推广活动'
            };
            
            const activityName = activities[activityType] || '促销活动';
            
            if (confirm(`确定要参与${activityName}吗？\n\n参与后将享受平台流量扶持和专项服务。`)) {
                alert(`报名成功！\n活动：${activityName}\n\n客服将在24小时内联系您，协助完成相关配置。`);
                showToast('报名成功，请关注后续通知');
            }
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            switchNotificationTab('all');
        });
    </script>
</body>
</html>